import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:meal/constant/antd_icons.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/model/biz_time_range.dart';
import 'package:meal/ui/delivery_period_pricker.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

///
/// 配送时段
///
class DeliveryPeriod extends StatefulWidget {
  const DeliveryPeriod({Key? key}) : super(key: key);

  @override
  State<DeliveryPeriod> createState() => _DeliveryPeriodState();
}

class _DeliveryPeriodState extends State<DeliveryPeriod> with SingleTickerProviderStateMixin {
  bool auto = true;

  List<BizTimeRange> times = [];

  late AnimationController controller;

  late Tween<double> tween;

  Widget get actions {
    return BrnTextAction(
      '确定',
      iconPressed: onSure,
      themeData: BrnAppBarConfig(
          actionsStyle: BrnTextStyle(
              color: Colors.white, fontSize: Sizes.default16, fontWeight: FontWeight.normal)),
    );
  }

  @override
  void initState() {
    times.add(BizTimeRange(start: '11:30', end: '15:30'));
    times.add(BizTimeRange(start: '16:30', end: '22:30'));
    controller = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
    tween = Tween(begin: 0, end: 1);
    controller.reverse();
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar('配送时段', actions: actions),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: Sizes.default50,
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
              child: Text('自行配送',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color797, fontSize: Sizes.default13)),
            ),
            Container(
              padding: const EdgeInsets.symmetric(
                  vertical: Sizes.default10, horizontal: Sizes.default15),
              decoration: const BoxDecoration(
                color: Colors.white,
              ),
              child: Column(
                children: [
                  InkWell(
                    onTap: () {
                      if (auto != true) {
                        controller.reverse();
                        setState(() {
                          auto = true;
                        });
                      }
                    },
                    child: SizedBox(
                      height: Sizes.default50,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text('同外卖营业时段',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                          auto
                              ? ToolsUtils.getUrlSvg(
                                  'https://cdn7.axureshop.com/demo/1525603/images/配送时段/u10803.svg',
                                  width: Sizes.default20,
                                  height: Sizes.default20)
                              : const Text('')
                        ],
                      ),
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      if (auto != false) {
                        controller.forward();
                        setState(() {
                          auto = false;
                        });
                      }
                    },
                    child: SizedBox(
                      height: Sizes.default50,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text('自定义时段',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                          !auto
                              ? ToolsUtils.getUrlSvg(
                                  'https://cdn7.axureshop.com/demo/1525603/images/配送时段/u10803.svg',
                                  width: Sizes.default20,
                                  height: Sizes.default20)
                              : const Text('')
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
            ScaleTransition(
              scale: tween.animate(
                CurvedAnimation(parent: controller, curve: Curves.linear),
              ),
              child: Column(
                children: [
                  Container(
                    height: Sizes.default50,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                    child: Text('自定义时段',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color797, fontSize: Sizes.default13)),
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(
                        vertical: Sizes.default10, horizontal: Sizes.default15),
                    decoration: const BoxDecoration(
                      color: Colors.white,
                    ),
                    child: Column(
                      children: [
                        ListBody(
                            children: times.map((e) {
                          return SizedBox(
                            height: Sizes.default50,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text('${e.start}-${e.end}',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: Sizes.default15, color: ColorsUtils.color333)),
                                IconButton(
                                    onPressed: () {
                                      setState(() {
                                        times.remove(e);
                                      });
                                    },
                                    icon: Icon(
                                      AntdIcons.close,
                                      size: Sizes.default20,
                                      color:
                                          ColorsUtils.parseColorFromHexString(ColorsUtils.color666),
                                    ))
                              ],
                            ),
                          );
                        }).toList()),
                        Container(
                            alignment: Alignment.center,
                            child: TextButton(
                              onPressed: () {
                                showBottom(context);
                              },
                              child: Text('添加时段 ${times.length}/5',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: Sizes.default15, color: ColorsUtils.colorFf6)),
                            ))
                      ],
                    ),
                  ),
                  Container(
                    height: Sizes.default50,
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                    child: Text('自定义时段必须在外卖营业时段之内',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color797, fontSize: Sizes.default13)),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  showBottom(BuildContext context) {
    ///
    /// isScrollControlled 是否时全屏还是半屏
    /// isDismissible 外部是否可以点击，false不可以点击，true可以点击，点击后消失
    /// backgroundColor 通常可以设置白色和透明，
    /// barrierColor 设置遮挡底部的半透明颜色,默认是black54,可以设置成透明的;
    /// enableDrag 是否可以向下拖动关闭,默认是true打开的;
    ///
    showModalBottomSheet(
        context: context,
        elevation: 0,
        isScrollControlled: false,
        useRootNavigator: true,
        backgroundColor: Colors.transparent,
        builder: (BuildContext context) {
          return DeliveryPeriodPricker(onConfirm: (String start, String end) {
            if (start.isNotEmpty && end.isNotEmpty) {
              setState(() {
                times.add(BizTimeRange(start: start, end: end));
              });
            }
          });
        });
  }

  void onSure() {
    Get.back();
  }
}
